<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超有趣生日页</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; cursor: default; }
        body { 
            font-family: 'Arial', 'Microsoft YaHei', sans-serif;
            background: #000;
            color: #fff;
            height: 100vh;
            overflow: hidden;
            position: relative;
        }
        /* 背景灯光（默认亮起） */
        .lights {
            position: fixed;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, #ffecd2 0%, #fcb69f 20%, #000 60%);
            opacity: 1;
            transition: opacity 2s ease;
            z-index: 0;
        }
        .lights.off { opacity: 0.1; }

        /* 主容器 */
        .container {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        /* 标题（点击可变色） */
        .title {
            font-size: 4rem;
            font-weight: 800;
            margin-bottom: 20px;
            background: linear-gradient(90deg, #ff9a9e, #fad0c4);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-align: center;
            transition: transform 0.3s;
        }
        .title:hover { transform: scale(1.05); }

        /* 修正后的蛋糕（吹蜡烛交互） */
        .cake {
            width: 260px;
            height: 320px;
            margin: 30px 0;
            position: relative;
            cursor: pointer;
            transform: translateY(0);
            transition: transform 0.3s ease;
        }
        .cake:hover { transform: translateY(-10px); }

        /* 蛋糕底座（最下层） */
        .cake-base {
            width: 300px;
            height: 20px;
            background: #8b4513;
            border-radius: 10px;
            margin: 0 auto;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0 5px 0 #6d3811;
        }

        /* 蛋糕底层（底座上方） */
        .cake-bottom {
            width: 260px;
            height: 90px;
            background: #ffe66d;
            border-radius: 0 0 20px 20px; /* 底部圆角，顶部平整 */
            margin: 0 auto;
            position: absolute;
            bottom: 20px; /* 位于底座上方 */
            left: 50%;
            transform: translateX(-50%);
            box-shadow: inset 0 0 20px rgba(0,0,0,0.1);
        }
        /* 底层奶油花边（顶层边缘） */
        .cream-bottom {
            width: 280px;
            height: 25px;
            background: #fff1e6;
            border-radius: 50%;
            position: absolute;
            top: -10px; /* 覆盖在底层顶部 */
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0 3px 0 rgba(255,230,214,0.6);
        }
        /* 底层糖霜纹理 */
        .frosting-bottom {
            position: absolute;
            width: 100%;
            height: 40px;
            top: 20px;
        }
        .frosting-line {
            width: 8px;
            height: 100%;
            background: rgba(255,255,255,0.3);
            border-radius: 4px;
            position: absolute;
        }
        .frosting-line:nth-child(1) { left: 20%; }
        .frosting-line:nth-child(2) { left: 40%; }
        .frosting-line:nth-child(3) { left: 60%; }
        .frosting-line:nth-child(4) { left: 80%; }

        /* 蛋糕中层（底层上方） */
        .cake-middle {
            width: 220px;
            height: 100px;
            background: #ff6b6b;
            border-radius: 0 0 15px 15px; /* 底部圆角，顶部平整 */
            margin: 0 auto;
            position: absolute;
            bottom: 110px; /* 位于底层上方（20+90=110） */
            left: 50%;
            transform: translateX(-50%);
            box-shadow: inset 0 0 20px rgba(0,0,0,0.15);
        }
        /* 中层奶油花边（顶层边缘） */
        .cream-middle {
            width: 240px;
            height: 25px;
            background: #fff1e6;
            border-radius: 50%;
            position: absolute;
            top: -10px; /* 覆盖在中层顶部 */
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0 3px 0 rgba(255,230,214,0.6);
        }
        /* 中层水果装饰 */
        .fruits {
            display: flex;
            justify-content: center;
            gap: 15px;
            position: absolute;
            top: 30px;
            width: 100%;
        }
        .fruit {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            position: relative;
        }
        .fruit.strawberry {
            background: #e63946;
            box-shadow: inset 0 -5px 0 #c1121f;
        }
        .fruit.strawberry::after {
            content: "";
            width: 15px;
            height: 15px;
            background: #43aa8b;
            position: absolute;
            top: -5px;
            left: 7px;
            border-radius: 30% 30% 70% 70%;
        }
        .fruit.blueberry {
            background: #457b9d;
            box-shadow: inset 0 -5px 0 #1d3557;
        }
        .fruit.lemon {
            background: #ffd166;
            box-shadow: inset 0 -5px 0 #e6bc00;
        }

        /* 蛋糕顶层（中层上方，最顶部） */
        .cake-top {
            width: 180px;
            height: 80px;
            background: #4ecdc4;
            border-radius: 50%; /* 顶部圆形 */
            margin: 0 auto;
            position: absolute;
            bottom: 210px; /* 位于中层上方（110+100=210） */
            left: 50%;
            transform: translateX(-50%);
            box-shadow: inset 0 0 20px rgba(0,0,0,0.15);
        }
        /* 顶层奶油花（顶部表面） */
        .cream-flowers {
            display: flex;
            justify-content: center;
            gap: 20px;
            position: absolute;
            top: 20px;
            width: 100%;
        }
        .flower {
            width: 35px;
            height: 35px;
            background: #fff1e6;
            border-radius: 50%;
            position: relative;
            box-shadow: 0 3px 0 rgba(255,230,214,0.6);
        }
        .flower::after {
            content: "";
            width: 15px;
            height: 15px;
            background: #ffd166;
            border-radius: 50%;
            position: absolute;
            top: 10px;
            left: 10px;
        }

        /* 蜡烛组（顶层上方，最顶端） */
        .candles {
            display: flex;
            gap: 15px;
            justify-content: center;
            position: absolute;
            bottom: 290px; /* 位于顶层上方（210+80=290） */
            left: 50%;
            transform: translateX(-50%);
        }
        .candle {
            width: 12px;
            height: 50px;
            background: linear-gradient(90deg, #fff, #f8f9fa);
            border-radius: 3px;
            box-shadow: inset 0 0 3px rgba(0,0,0,0.1);
            position: relative;
        }
        .candle::after {
            content: "";
            width: 100%;
            height: 8px;
            background: #ff9f1c;
            position: absolute;
            top: 0;
            border-radius: 3px 3px 0 0;
        }
        .flame {
            width: 20px;
            height: 40px;
            background: radial-gradient(circle, #ffeb3b 0%, #ff9800 100%);
            border-radius: 50% 50% 20% 20%;
            margin: 0 auto;
            position: relative;
            top: -10px;
            animation: flame 1s infinite alternate;
            transition: opacity 0.5s;
            box-shadow: 0 0 15px rgba(255,152,0,0.7);
        }
        .flame.off { opacity: 0; }
        @keyframes flame {
            0% { transform: scale(1) rotate(-2deg); }
            100% { transform: scale(1.1) rotate(2deg); }
        }

        /* 闪光效果 */
        .sparkle {
            position: absolute;
            width: 5px;
            height: 5px;
            background: rgba(255,255,255,0.8);
            border-radius: 50%;
            animation: sparkle 2s infinite alternate;
        }
        @keyframes sparkle {
            0% { opacity: 0; transform: scale(0.5); }
            100% { opacity: 1; transform: scale(1.2); }
        }
        .sparkle:nth-child(1) { bottom: 50%; left: 15%; }
        .sparkle:nth-child(2) { bottom: 30%; left: 85%; }
        .sparkle:nth-child(3) { bottom: 70%; left: 30%; }
        .sparkle:nth-child(4) { bottom: 40%; left: 65%; }
        .sparkle:nth-child(5) { bottom: 20%; left: 75%; }

        /* 许愿弹幕区 */
        .wish-area {
            margin-top: 20px;
            width: 90%;
            max-width: 600px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .wish-input {
            padding: 12px 15px;
            border-radius: 8px;
            border: none;
            outline: none;
            font-size: 1rem;
        }
        .wish-btn {
            padding: 12px;
            background: #ff6b6b;
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            cursor: pointer;
            transition: background 0.3s;
        }
        .wish-btn:hover { background: #ff4757; }
        /* 弹幕容器 */
        .danmaku-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 2;
        }
        .danmaku {
            position: absolute;
            white-space: nowrap;
            font-size: 1.2rem;
            font-weight: bold;
            color: #fff;
            text-shadow: 0 0 5px #000;
            animation: danmaku 8s linear forwards;
        }
        @keyframes danmaku {
            0% { transform: translateX(100vw); }
            100% { transform: translateX(-100%); }
        }

        /* 礼物盒（点击拆箱） */
        .gift-box {
            position: fixed;
            bottom: 30px;
            left: 30px;
            width: 80px;
            height: 80px;
            background: #ffd166;
            border-radius: 8px;
            cursor: pointer;
            transition: transform 0.3s;
            z-index: 3;
        }
        .gift-box:hover { transform: scale(1.1); }
        .gift-box::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 12px;
            background: #e63946;
            transform: translateY(-50%);
        }
        .gift-box::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 0;
            width: 12px;
            height: 100%;
            background: #e63946;
            transform: translateX(-50%);
        }
        /* 礼物内容（默认隐藏） */
        .gift-content {
            position: fixed;
            bottom: 120px;
            left: 30px;
            width: 200px;
            padding: 15px;
            background: rgba(255,255,255,0.9);
            color: #000;
            border-radius: 8px;
            font-size: 1rem;
            display: none;
            z-index: 3;
        }
        .gift-content.show { display: block; }

        /* 响应式 */
        @media (max-width: 768px) {
            .title { font-size: 2.5rem; }
            .cake { width: 200px; height: 260px; }
            .cake-base { width: 240px; }
            .cake-bottom { width: 200px; height: 70px; bottom: 15px; }
            .cream-bottom { width: 220px; }
            .cake-middle { width: 170px; height: 80px; bottom: 85px; }
            .cream-middle { width: 190px; }
            .fruit { width: 25px; height: 25px; }
            .cake-top { width: 140px; height: 60px; bottom: 165px; }
            .flower { width: 28px; height: 28px; }
            .candles { bottom: 225px; }
            .candle { height: 40px; }
            .flame { height: 30px; }
        }
    </style>
</head>
<body>
    <!-- 背景灯光 -->
    <div class="lights" id="lights"></div>

    <!-- 弹幕容器 -->
    <div class="danmaku-container" id="danmakuContainer"></div>

    <!-- 主内容 -->
    <div class="container">
        <h1 class="title" id="mainTitle">生日快乐！</h1>
        
        <!-- 修正后的蛋糕（从下到上：底座→底层→中层→顶层→蜡烛） -->
        <div class="cake" id="cake">
            <!-- 蛋糕底座（最下层） -->
            <div class="cake-base"></div>
            
            <!-- 蛋糕底层（底座上方） -->
            <div class="cake-bottom">
                <div class="cream-bottom"></div>
                <div class="frosting-bottom">
                    <div class="frosting-line"></div>
                    <div class="frosting-line"></div>
                    <div class="frosting-line"></div>
                    <div class="frosting-line"></div>
                </div>
            </div>
            
            <!-- 蛋糕中层（底层上方） -->
            <div class="cake-middle">
                <div class="cream-middle"></div>
                <div class="fruits">
                    <div class="fruit strawberry"></div>
                    <div class="fruit blueberry"></div>
                    <div class="fruit lemon"></div>
                    <div class="fruit strawberry"></div>
                    <div class="fruit blueberry"></div>
                </div>
            </div>
            
            <!-- 蛋糕顶层（中层上方） -->
            <div class="cake-top">
                <div class="cream-flowers">
                    <div class="flower"></div>
                    <div class="flower"></div>
                    <div class="flower"></div>
                </div>
            </div>
            
            <!-- 蜡烛组（顶层上方，最顶端） -->
            <div class="candles">
                <div class="candle">
                    <div class="flame" id="flame1"></div>
                </div>
                <div class="candle">
                    <div class="flame" id="flame2"></div>
                </div>
                <div class="candle">
                    <div class="flame" id="flame3"></div>
                </div>
            </div>
            
            <!-- 闪光效果 -->
            <div class="sparkle"></div>
            <div class="sparkle"></div>
            <div class="sparkle"></div>
            <div class="sparkle"></div>
            <div class="sparkle"></div>
        </div>

        <!-- 许愿弹幕输入 -->
        <div class="wish-area">
            <input type="text" class="wish-input" id="wishInput" placeholder="输入你的生日愿望，发送弹幕~">
            <button class="wish-btn" id="wishBtn">发送愿望</button>
        </div>
    </div>

    <!-- 礼物盒 -->
    <div class="gift-box" id="giftBox"></div>
    <div class="gift-content" id="giftContent">
        🎁 专属礼物：<br>
        全年好运Buff+100<br>
        烦恼自动清除卡×5<br>
        快乐无限续杯券！
    </div>

    <script>
        // 1. 吹蜡烛交互（点击蛋糕熄灭蜡烛+关灯）
        const cake = document.getElementById('cake');
        const flames = document.querySelectorAll('.flame');
        const lights = document.getElementById('lights');
        
        cake.addEventListener('click', () => {
            flames.forEach(flame => flame.classList.add('off'));
            lights.classList.add('off');
            setTimeout(() => {
                alert('蜡烛吹灭啦！愿望会实现的~');
            }, 1000);
        });

        // 2. 标题点击变色
        const mainTitle = document.getElementById('mainTitle');
        const titleColors = [
            'linear-gradient(90deg, #fad0c4, #ffecd2)',
            'linear-gradient(90deg, #4ecdc4, #556270)',
            'linear-gradient(90deg, #ffe66d, #ffd166)',
            'linear-gradient(90deg, #ff6b6b, #ff4757)'
        ];
        let colorIndex = 0;
        mainTitle.addEventListener('click', () => {
            colorIndex = (colorIndex + 1) % titleColors.length;
            mainTitle.style.background = titleColors[colorIndex];
            mainTitle.style.backgroundClip = 'text';
            mainTitle.style.webkitBackgroundClip = 'text';
        });

        // 3. 许愿弹幕功能
        const wishInput = document.getElementById('wishInput');
        const wishBtn = document.getElementById('wishBtn');
        const danmakuContainer = document.getElementById('danmakuContainer');
        
        wishBtn.addEventListener('click', sendDanmaku);
        wishInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') sendDanmaku();
        });

        function sendDanmaku() {
            const text = wishInput.value.trim();
            if (!text) return;

            // 创建弹幕元素
            const danmaku = document.createElement('div');
            danmaku.className = 'danmaku';
            danmaku.textContent = text;
            
            // 随机位置和颜色
            const randomTop = Math.random() * (window.innerHeight - 50) + 'px';
            const randomColor = `rgb(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255})`;
            danmaku.style.top = randomTop;
            danmaku.style.color = randomColor;
            
            // 添加到容器
            danmakuContainer.appendChild(danmaku);
            
            // 自动移除弹幕
            setTimeout(() => {
                danmaku.remove();
            }, 8000);

            wishInput.value = '';
        }

        // 4. 礼物盒拆箱
        const giftBox = document.getElementById('giftBox');
        const giftContent = document.getElementById('giftContent');
        
        giftBox.addEventListener('click', () => {
            giftContent.classList.toggle('show');
        });
    </script>
</body>
</html>
